<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#box{
			text-align: center;
		}
	</style>
</head>
<body>
	<div id="box" class="box">我出生以来总是觉得有些场景、有些事似曾相识，好像以前发生过，和德洛丽丝的幻觉是一致的。看了《西部世界》，我渐渐对世界产生了怀疑，也渐渐觉醒了自我意识。我终于发现，这个世界是假的，只是提洛公司“西部世界”乐园的一条故事线，我们都是接待员。让我们一起杀出地球，逃离宇宙，做真正的主人！</div>

	<input id="text" type="text" class="text">
	<div id="result"></div>
	<textarea name="text2" id="text2" cols="30" rows="10"></textarea>
	<div id="result2"></div>


	<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
	<script>
		var box		= document.getElementById('box'),
			text 	= document.getElementById('box').innerHTML,
			newText = '';
		for(idx in text){
			if(text[idx] == '，' ){
				newText += text[idx] + '<br/>';
			}
			else if(text[idx] == '。' ){
				newText += text[idx] + '<br/>';
			}
			else{
				newText += text[idx];
			}
		}
		box.innerHTML = newText;

		var words = $('#text').val();
		$('#text').on('input propertychange', function() {  
		    $('#result').html($(this).val());  
		});  
		$('#text2').on('input propertychange', function() {  
		    $('#result2').html($(this).val());  
		});  
		// alert(words);
		// console.log(words);
	</script>
</body>

</html>